<template>
	<div class="equipmentBB">
		<el-form :inline="true" :model="formInline" class="demo-form-inline">
			<el-form-item label="">
				<el-input v-model="formInline.name" placeholder="装备名称"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>
		<el-container class="outerContainer" v-if="currentEquipments.length === 0">
			装备搬运中
		</el-container>
		<el-row v-if="isMobile" :gutter="16">
			<el-col :span="12" v-for="(item,index) in currentEquipments" :key="item.id">
				<div @click="showEquitment(item)">
					<el-container class="outerContainer">
						<el-aside width="auto">
							<el-image style="width: 40px; height: 40px" :src="item.imgsrc">
								<div slot="error" class="image-slot">
									<el-image style="width: 40px; height: 40px" :src="errorImg"></el-image>
								</div>
							</el-image>
						</el-aside>
						<el-container width="auto">
							<el-header height="10rpx">
								<el-image v-for="i in item.rarity" :key="i" style="width: 10px; height: 10px"
									:src="starImg">
								</el-image>
							</el-header>
							<el-main>No.{{ item.id }}</el-main>
							<!-- <el-main>{{ item.title }}</el-main> -->
						</el-container>
						<el-footer>{{ item.title }}</el-footer>
					</el-container>
				</div>
			</el-col>
		</el-row>
		<el-row v-else :gutter="16">
			<el-col :span="8" v-for="(item,index) in currentEquipments" :key="item.id">
				<div @click="showEquitment(item)">
					<el-container class="outerContainer">
						<el-aside width="auto">
							<el-image style="width: 60px; height: 60px" :src="item.imgsrc">
								<div slot="error" class="image-slot">
									<el-image style="width: 60px; height: 60px" :src="errorImg"></el-image>
								</div>
							</el-image>
						</el-aside>
						<el-container width="auto">
							<el-header height="10rpx">
								<el-image v-for="i in item.rarity" :key="i" style="width: 20px; height: 20px"
									:src="starImg">
								</el-image>
							</el-header>
							<el-main>No.{{ item.id }}</el-main>
							<el-main>{{ item.title }}</el-main>
							<!-- <el-footer>Footer</el-footer> -->
						</el-container>
					</el-container>
				</div>
			</el-col>
		</el-row>
		<div class="block" v-if="isMobile">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize" :pager-count="5"
				layout="prev, pager, next" :total="total">
			</el-pagination>
		</div>
		<div class="block" v-else>
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="currentPage" :page-sizes="[5, 10, 20, 30]" :page-size="pageSize" :pager-count="11"
				layout="sizes, prev, pager, next, jumper" :total="total">
			</el-pagination>
		</div>

		<el-dialog :visible.sync="dialogVisible" :width="dialogWidth">
			<span slot="title">
				<el-container style="height: auto;">
					<el-container>
						<el-aside width="auto">
							<el-image style="width: 60px; height: 60px" :src="equipment.imgsrc">
								<div slot="error" class="image-slot">
									<el-image style="width: 60px; height: 60px" :src="errorImg"></el-image>
								</div>
							</el-image>
						</el-aside>
						<el-container width="auto">
							<el-header height="10rpx">
								<el-image v-for="i in equipment.rarity" :key="i" style="width: 20px; height: 20px"
									:src="starImg">
								</el-image>
							</el-header>
							<!-- <el-main style="color: #ffaa00;font-size: 15px;">{{ equipment.baseType }}</el-main> -->
							<el-main style="font-size: 25px;">{{ equipment.title }}</el-main>
						</el-container>
					</el-container>
					<el-footer style="color: #ffaa00;height: auto;margin-top: 5px;font-size: 15px;">{{ equipment.desc }}</el-footer>
				</el-container>
			</span>

			<span>
				<el-row>
					<el-col :span="attributesSpan" v-if="equipment.baseType != null">
						类型：{{ equipment.baseType }}
					</el-col>
					<el-col :span="attributesSpan" v-if="equipment.cost != null">
						负重：{{ equipment.cost }}
					</el-col>
					<el-col :span="attributesSpan" v-if="equipment.maxlv != null">
						最大等级：{{ equipment.maxlv }}
					</el-col>
					<el-col :span="attributesSpan" v-if="equipment.damageMaxLv != null && equipment.damageMaxLv != 0">
						满级攻击力：{{ equipment.damageMaxLv }}
					</el-col>
					<el-col :span="attributesSpan" v-if="equipment.ammoMaxLv != null">
						满级载弹：{{ equipment.ammoMaxLv }}
					</el-col>
					<el-col :span="attributesSpan" v-if="equipment.fireRateMaxLv != null && equipment.fireRateMaxLv != 0">
						射速：{{ equipment.fireRateMaxLv }}
					</el-col>
					<el-col :span="attributesSpan" v-if="equipment.hpMaxLv != null && equipment.hpMaxLv != 0">
						最大生命：{{ equipment.hpMaxLv }}
					</el-col>
					<el-col :span="attributesSpan" v-if="equipment.damageType != null">
						属性：{{damageTypeList[equipment.damageType]}}
					</el-col>
					<el-col :span="attributesSpan" v-if="equipment.seriesText != null">
						神系：{{equipment.seriesText}}
					</el-col>
				</el-row>
			</span>

			<span v-if="equipment.prop1 != null">
				<el-container>
					<el-header style="padding: 0px;margin-top: 15px;height: auto;">
						<span style="color: #ffaa00;">
							{{equipment.prop1.title}}
						</span>
						<span style="color: #989898;">
							{{damageTypeList[equipment.prop1.damageType]}}
						</span>
					</el-header>
					<el-main style="padding: 0px;">{{ equipment.prop1.maxLvDesc }}</el-main>
				</el-container>
			</span>

			<span v-if="equipment.prop2 != null">
				<el-container>
					<el-header style="color: #ffaa00;padding: 0px;margin-top: 15px;height: auto;">
						<span style="color: #ffaa00;">
							{{equipment.prop2.title}}
						</span>
						<span style="color: #989898;">
							{{damageTypeList[equipment.prop2.damageType]}}
						</span>
					</el-header>
					<el-main style="padding: 0px;">{{ equipment.prop2.maxLvDesc }}</el-main>
				</el-container>
			</span>

			<span slot="footer" class="dialog-footer">
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
	import {
		gaoshiApi
	} from '@/api/gaoshiApi';

	export default {
		name: 'EquipmentBB',
		components: {},
		data() {
			return {
				equipment: {},
				dialogVisible: false,
				equipments: [],
				currentEquipments: [],
				searchLoading: false,
				formInline: {
					name: ''
				},
				currentPage: 1,
				pageSize: 10,
				total: 0,
				errorImg: require("@/assets/error.png"),
				// starImg: "https://redbean.tech/images/star-full.png",
				// starImg: "/img/star.png",
				starImg: "",
				damageTypeList: {
					"power": "能量",
					"poison": "毒",
					"snow": "冰",
					"fire": "火",
					"physic": "物理",
					// "none": "无",
					"light": "电"
				},
				isMobile: true,
				attributesSpan: 8,
				dialogWidth: '80%',
			}
		},
		mounted() {
			this._isMobile();
			this.getAllEquipments();
		},
		methods: {
			async getAllEquipments() {
				try {
					this.searchLoading = true;
					let result = await gaoshiApi.getAllEquipment();
					this.equipments = result.data;
					this.total = this.equipments.length;
					for (var i = 0; i < this.total; i++) {
						// 获取装备图标url
						this.equipments[i].imgsrc = gaoshiApi.getImgSrc(this.equipments[i].img);
						// 将稀有度转换为数字
						this.equipments[i].rarity = Number(this.equipments[i].rarity);
						// 射速取至小数点后三位
						if (this.equipments[i].fireRateMaxLv != null) {
							let rate = String(this.equipments[i].fireRateMaxLv);
							this.equipments[i].fireRateMaxLv = rate.substring(0, rate.indexOf(".") + 4);
						}
						// 简介的特殊字符处理
						let desc = this.equipments[i].desc;
						let index = desc.indexOf("#");
						while (index >= 0) {
							desc = desc.substring(0, index) + "\n" + desc.substring(index + 2, desc.length);
							index = desc.indexOf("#n");
						}
						this.equipments[i].desc = desc;
					}
					this.currentEquipments = this.equipments.slice(0, this.pageSize);
					// console.log(this.currentEquipments);
					this.searchLoading = false;
				} catch (e) {
					console.error(e);
				}
			},

			getCurrentEquipments(val) {
				this.searchLoading = true;
				let right = val * this.pageSize + this.pageSize < this.total - 2 ? val * this.pageSize + this
					.pageSize : this.total - 2;
				this.currentEquipments = this.equipments.slice(val * this.pageSize, right);
				// console.log(this.currentEquipments);
				this.searchLoading = false;
			},
			handleSizeChange(val) {
				// console.log(`每页 ${val} 条`);
				this.pageSize = val;
				this.getCurrentEquipments(this.currentPage - 1);
			},
			handleCurrentChange(val) {
				// console.log(`当前页: ${val}`);
				this.currentPage = val;
				this.getCurrentEquipments(val - 1);
			},
			showEquitment(e) {
				this.equipment = e;
				this.dialogVisible = true;
			},
			async onSubmit() {
				try {
					this.searchLoading = true;
					let result = await gaoshiApi.getEquipmentByTitle(this.formInline.name);
					this.currentEquipments = result.data;
					for (let i = 0, length = this.currentEquipments.length; i < length; i++) {
						this.currentEquipments[i].imgsrc = gaoshiApi.getImgSrc(this.currentEquipments[i].img);
						if (this.currentEquipments[i].fireRateMaxLv != null) {
							let rate = String(this.currentEquipments[i].fireRateMaxLv);
							this.currentEquipments[i].fireRateMaxLv = rate.substring(0, rate.indexOf(".") + 4);
						}
						this.currentEquipments[i].rarity = Number(this.currentEquipments[i].rarity);
						// 简介的特殊字符处理
						let desc = this.currentEquipments[i].desc;
						let index = desc.indexOf("#");
						while (index >= 0) {
							desc = desc.substring(0, index) + "\n" + desc.substring(index + 2, desc.length);
							index = desc.indexOf("#");
						}
						this.currentEquipments[i].desc = desc;
					}
					this.searchLoading = false;
				} catch (e) {
					console.error(e);
				}
			},

			_isMobile() {
				this.isMobile = navigator.userAgent.match(
					/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
				);
				this.pageSize = this.isMobile ? 10 : 20;
				this.attributesSpan = this.isMobile ? 12 : 6;
				this.dialogWidth = this.isMobile? '80%' : '50%';
			}
		}
	}
</script>

<style scoped lang="scss">
	.equipmentBB {
		margin: 30px;
	}

	.outerContainer {
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		color: #333;
		border-radius: 10px;
		padding: 5px;
		margin-bottom: 10px;
	}

	.outerContainer:hover {
		background-color: #B3C0D1;
		cursor: pointer;
	}

	.el-container {
		// background-color: #B3C0D1;
	}

	.el-header,
	.el-main {
		// text-align: center;
		padding: 0px 0px;
		padding-left: 20px;
		// height: 0px;
	}

	.el-footer {
		padding: 0px;
	}
</style>
